import React from 'react';
import { BrowserRouter as Router, Route, Link, Switch } from "react-router-dom";

import { Menu } from 'antd';
import { 
  HomeOutlined, HeatMapOutlined, SettingOutlined, TeamOutlined,
  SlidersOutlined, BugOutlined, DownSquareOutlined,
  SnippetsOutlined, UserOutlined, TwitterOutlined,
  NotificationOutlined, LoadingOutlined
} from '@ant-design/icons';


import Dashboard from './Dashboard'

const { SubMenu } = Menu;


export default function AdminContainer(props) {

  return (
    <Router basename="/admin">
    <div className="w-screen h-screen">
      <div className="fixed w-full h-16 bg-gray-200 text-center">
        <h2>Top Head</h2>
      </div>

      <div className="flex h-screen pt-16">

        <section className="w-64">

          <Menu
            theme="light"
            mode="inline"            
          >
            
            <SubMenu key="sub1" icon={<SlidersOutlined />} title="监控面板">
              <Menu.Item key="11" icon={<HomeOutlined />}>
                <Link to="/">首页</Link>
              </Menu.Item>
              <Menu.Item key="12" icon={<HeatMapOutlined />}>
                <Link to="/dashboard">数据流量</Link>
              </Menu.Item>
              <Menu.Item key="13" icon={<BugOutlined />}>安全防护</Menu.Item>
            </SubMenu>
            <SubMenu key="sub2" icon={<SnippetsOutlined />} title="数据管理">
              <Menu.ItemGroup key="g1" title="用户">
                <Menu.Item key="21" icon={<TeamOutlined />}>查询列表</Menu.Item>
                <Menu.Item key="22" icon={<UserOutlined />}>VIP</Menu.Item>
              </Menu.ItemGroup>
              <Menu.ItemGroup key="g2" icon={<TwitterOutlined />} title="聊天室">
                <Menu.Item key="23">活跃列表</Menu.Item>
                <Menu.Item key="24">违规</Menu.Item>
              </Menu.ItemGroup>
            </SubMenu>
            
            <SubMenu key="sub3" icon={<SettingOutlined />} title="系统">
              <Menu.ItemGroup key="g3" title="定时任务">
                <Menu.Item key="31" icon={<LoadingOutlined />}>执行</Menu.Item>
              </Menu.ItemGroup>
              <Menu.ItemGroup key="g4" title="通知">
                <Menu.Item key="32" icon={<NotificationOutlined />}>下发</Menu.Item>
                <Menu.Item key="33" icon={<DownSquareOutlined />}>统计</Menu.Item>
              </Menu.ItemGroup>
            </SubMenu>
          </Menu>

        </section>

        <div className="overflow-y-scroll text-center w-full bg-gray-50">
          <h1>Main Content</h1>

          <Switch>
            <Route path="/dashboard" component={Dashboard} />
          </Switch>
            
        </div>

      </div>
      
    </div>
    </Router>
  )
  
}